<template>
	<view class="container">
		<uni-nav-bar fixed="true" color="#ffffff" :border="false" :left-icon="leftIcon" @clickLeft="leftFunc"
			background-color="linear-gradient(-90deg, #ED602B, #F19136)" :status-bar="true" title="商家主页" />
		<view class="bg" :style="{ top: barHeight + 'px' }"></view>
		<view class="content">
			<swiper class="main-img" autoplay="autoplay" interval="5000" duration="400" circular="true"
				v-if="bannerList.length">
				<swiper-item style="height: 300rpx;" v-for="(banner, index) in bannerList" :key="index">
					<image style="border-radius: 10px;width: 100%; height: 300rpx;" :src="banner.image"
						mode="aspectFill"></image>
				</swiper-item>
			</swiper>
			<!-- <image :src="details.banner" mode="aspectFill" class="main-img"></image> -->
			<view class="place"></view>
			<view class="nav-wrapper">
				<view class="nav-item" v-for="(nav, index) in navList" @click="toLink(nav.path)" :key="index">
					<image :src="nav.icon" class="icon"></image>
					<view class="title">{{nav.title}}</view>
				</view>
			</view>
			<view class="list-wrapper">
				<view class="title-wrapper" @click="toLink(navList[0].path)">
					<view class="title">商家超市精选</view>
					<view class="timer">
						门店服务时段：{{details.marketDoBussinessTime}}
					</view>
					<view class="more">
						<view class="titl">更多</view>
						<image src="/static/next03.png" class="icon"></image>
					</view>
				</view>
				<view class="list" v-if="supermarketList.length">
					<product v-for="product in supermarketList" :product="product" :key="product.id" :type="1"
						:details="details">
					</product>
				</view>
			</view>
			<view class="list-wrapper">
				<view class="title-wrapper" @click="toLink(navList[1].path)">
					<view class="title">商家贴心服务</view>
					<view class="timer">
						门店服务时段：{{details.serviceDoBussinessTime}}
					</view>
					<view class="more">
						<view class="titl">更多</view>
						<image src="/static/next03.png" class="icon"></image>
					</view>
				</view>
				<view class="list" v-if="serviceList.length">
					<product v-for="product in serviceList" :product="product" :key="product.id" :type="2"
						:details="details"></product>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import uniNavBar from '@/components/uni-nav-bar/uni-nav-bar.vue'
	import product from './product.vue'
	import {
		shopDetail
	} from '@/api/store.js'
	import {
		frontPage
	} from '@/api/product.js'

	export default {
		components: {
			product,
			uniNavBar
		},
		data() {
			return {
				bannerList: [],
				barHeight: 0,
				leftIcon: 'home',
				details: {},
				supermarketList: [],
				serviceList: [],
				navList: [{
						title: '商家超市',
						icon: '/static/chaoshi.png',
						path: '/pages/store/supermarket'
					},
					{
						title: '商家服务',
						icon: '/static/sjfw.png',
						path: '/pages/store/business-services'
					},
					{
						title: '商家信息',
						icon: '/static/sjxx.png',
						path: `/pages/store/storeinfo`
					},
					{
						title: 'WIFI密码',
						icon: '/static/wifp.png',
						path: `/pages/store/wifi`
					},
					{
						title: '商家留言',
						icon: '/static/sjly.png',
						path: '/pages/store/message'
					},
					{
						title: '私人订制',
						icon: '/static/quanquan.png',
						path: '/pages/store/customization'
					},
					{
						title: '发票预约',
						icon: '/static/fapiao.png',
						path: '/pages/store/invoice'
					},
					{
						title: '呼叫前台',
						icon: '/static/qiantai.png',
						// path: '/pages/store/message'
					},
					{
						title: '金手联盟',
						icon: '/static/jinshou.png',
						path: '/pages/store/alliance'
					},
					{
						title: '跨级投诉',
						icon: '/static/kuaji.png',
						path: '/pages/store/message?type=2',
					}
				]
			}
		},
		onLoad(option) {
			if (option.leftIcon) {
				this.leftIcon = option.leftIcon
			}
			console.log(option.scene)
			if (option.scene) {
				let scene = decodeURIComponent(option.scene);
				// uni.showToast({
				//   title: '' + scene,
				//   icon: 'none',
				//   duration: 8000,
				//   mask: true,
				// })
				let shopId = scene.split("&")[0].replace("shopId=", '');
				let Tell = scene.split("&")[1];
				console.log('xxxxxxxxxxxxxxxxx')
				uni.setStorageSync("inTell", "1");
				uni.setStorageSync("inTellShop", shopId);

				this.shopId = shopId
				this.getDetails()
				this.getSupermarketList()
				this.getServiceList()
				return
			}


			this.shopId = option.shopId
			this.getDetails()
			this.getSupermarketList()
			this.getServiceList()
		},

		onShow() {
			const {
				statusBarHeight
			} = uni.getSystemInfoSync()
			this.barHeight = statusBarHeight + 44
		},
		methods: {
			getDetails() {
				const data = {
					shopId: this.shopId
				}
				shopDetail(data).then(respanse => {
					if (respanse.result.status == 1) {
						this.details = respanse.result
						this.bannerList = respanse.result.banners
					} else {
						uni.showToast({
							title: "商户已停用",
							icon: 'none',
							duration: 30000
						})
						setTimeout(() => {
							uni.redirectTo({
								url: '/pages/index/index'
							})
						}, 3000)
					}
				})
			},

			// 商家超市精选
			getSupermarketList() {
				const data = {
					isSelected: 1,
					pageNum: 1,
					pageSize: 20,
					type: 3, // 1.积分商品 2.特价商品 3.商户超市商品 4.商户服务 5.售货机商品
					shopId: this.shopId
				}
				frontPage(data).then(respanse => {
					this.supermarketList = respanse.result.rows
				})
			},

			// 商家贴心服务
			getServiceList() {
				const data = {
					isSelected: 1,
					pageNum: 1,
					pageSize: 20,
					type: 4, // 1.积分商品 2.特价商品 3.商户超市商品 4.商户服务 5.售货机商品
					shopId: this.shopId
				}
				frontPage(data).then(respanse => {
					this.serviceList = respanse.result.rows
				})
			},

			toLink(url) {
				if (url) {
					if (url == '/pages/store/storeinfo') {
						uni.navigateTo({
							url: `${url}?imgPath=${encodeURIComponent(this.details.infoImage)}&shopId=${this.details.id}`
						})
					} else if(url == '/pages/store/message?type=2'){
						uni.navigateTo({
							url: `/pages/store/message?type=2&details=${encodeURIComponent(JSON.stringify(this.details))}&shopId=${this.details.id}`
						})
					} else {
						uni.navigateTo({
							url: `${url}?details=${encodeURIComponent(JSON.stringify(this.details))}&shopId=${this.details.id}`
						})
					}
				}else{
					// 拨打电话
					uni.makePhoneCall({
						phoneNumber: this.details.phone
					});
				}
			},

			leftFunc() {
				if (this.leftIcon == 'back') {
					uni.navigateBack()
				} else {
					uni.reLaunch({
						url: '/pages/index/index'
					})
				}

			}
		}
	}
</script>
<style>
	body {
		background-color: #fff;
	}
</style>
<style lang="scss" scoped>
	/deep/.uni-navbar__header {
		padding-left: 10rpx;
	}

	/deep/.uni-navbar__header-btns {
		padding: 0 6px 0 9px !important;
	}

	.bg {
		position: fixed;
		left: 0;
		right: 0;
		height: 170rpx;
		background: linear-gradient(-90deg, #ED602B, #F19136);
	}

	.timer {
		font-size: 20rpx;
		font-weight: normal;
		margin-left: 30rpx;
		align-self: center;
	}

	.main-img {
		position: absolute;
		left: 50%;
		top: -95rpx;
		display: block;
		width: 694rpx;
		height: 300rpx;
		border-radius: 10px;
		background-color: #F5F5F5;
		transform: translateX(-50%);
	}

	.place {
		height: 205rpx;
	}

	.content {
		position: relative;
		margin-top: 110rpx;
		border-radius: 56rpx 56rpx 0 0;
		background-color: #fff;

		.nav-wrapper {
			display: flex;
			flex-wrap: wrap;
			padding: 20rpx 21rpx;

			.nav-item {
				width: 20%;
				box-sizing: border-box;
				// width: 20%;
				padding: 12rpx 0 16rpx;

				.icon {
					display: block;
					margin: 0 auto;
					width: 90rpx;
					height: 90rpx;
					border-radius: 50%;
				}

				.title {
					margin-top: 15rpx;
					line-height: 34rpx;
					text-align: center;
					font-size: 24rpx;
					color: #333333;
				}
			}
		}
	}

	.list-wrapper {
		padding: 0 45rpx;

		.title-wrapper {
			display: flex;
			justify-content: space-between;
			padding: 34rpx 0 27rpx;

			.title {
				line-height: 42rpx;
				font-size: 32rpx;
				font-weight: bold;
				color: #070707;
			}

			.more {
				display: flex;
				padding-left: 20rpx;
				align-items: center;

				.titl {
					line-height: 42rpx;
					font-size: 24rpx;
					color: #999999;
				}

				.icon {
					margin-left: 8rpx;
					width: 14rpx;
					height: 26rpx;
				}
			}
		}

		.list {
			display: flex;
			flex-wrap: nowrap;
			padding: 10rpx 3rpx 23rpx;
			background: #FFFFFF;
			box-shadow: 0px 0px 20rpx 0px #E6E6E6;
			border-radius: 10rpx;
			overflow: auto;

			product {
				width: 30%;
			}
		}
	}
</style>
